<script setup>
import "../assets/date"
import axios from "axios"
import { onMounted, ref } from "vue"
let tat = ref("")
let txt = ref("")
onMounted(() => {
  axios.get("api/fenlei").then(res => {
    tat.value = res.data.data
  })
})

onMounted(() => {
  axios.get("api/fenlei1").then(res => {
    txt.value = res.data.data
  })
})
</script>
<template>
  <div class="box">
    <div class="title">
      校园易购
    </div>
    <div class="bar">
      <img src="../assets/hanbaizhu.jpg" alt="">
    </div>
    <el-row class="icons" :gutter="20">
      <el-col :span="6" v-for="item in txt">
        <RouterLink :to="'/fenlei1/' + item.id" class="wz">
          <img :src="item.img" alt="">
          <span>{{ item.name }}</span>
        </RouterLink>
      </el-col>
    </el-row>
    <div class="wenzi">
      <div>热品排行</div>
      <div>更多</div>
    </div>
    <div class="huadongtu">
      <el-scrollbar>
        <div class="scrollbar-flex-content">
          <p v-for="item in 6" :key="item" class="scrollbar-demo-item">
            {{ item }}
          </p>
        </div>
      </el-scrollbar>
    </div>
    <div class="wenzi">
      <div>临期预购</div>
      <div>更多</div>
    </div>
    <RouterLink to="/shangpin" class="dav">
      <div class="da">
        <div class="linqi" v-for="item in tat">
          <img src="../assets/hanbaizhu.jpg" alt="">
          <div class="ac">
            <span>{{ item.name }}</span>
            <img src="../assets/hanbaizhu.jpg" alt="">
          </div>
          <div class="jiage">
            <span>{{ item.title }}</span>
            <span>原价：{{ item.yuanjia }}</span>
          </div>
        </div>
      </div>
    </RouterLink>

    <el-col class="yc">
      <RouterLink to="/" class="wz">首页</RouterLink>

      <RouterLink to="/gouwuche" class="wz">购物车</RouterLink>
      <RouterLink to="/Home" class="wz">我的</RouterLink>
    </el-col>
  </div>
</template>
<style scoped>
.box {
  width: 375px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.title {
  height: 25px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
}

.bar img {
  width: 100%;
  height: 150px;
}

.icons {
  text-align: center;
  padding: 20px;
}

.icons img {
  width: 60px;
  border-radius: 50%;
}

.wenzi {
  display: flex;
  justify-content: space-between;
  background-color: #eeeded;
  padding-left: 20px;
  padding-right: 20px;
}

.scrollbar-flex-content {
  background-color: #eeeded;
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 200px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.linqi img {
  width: 170px;
  height: 200px;
}

.da {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: calc(50%-5px);
  background-color: #eeeded;
}

.linqi {
  width: 45%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.ac img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.ac {
  display: flex;
  align-items: center;
  justify-content: space-around;
  
}

.jiage span:nth-of-type(1) {
  color: red;
  font-size: 18px;
}

.jiage {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.jiage span:nth-of-type(2) {
  color: #ccc;
  font-size: 12px;
}
.dav{
  text-decoration: none;
  color: black;
}
.yc {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
}

.wz {
  color: black;
  text-align: center;
  text-decoration: none;
}
</style>